<template>
  <div class="big">
    <div class="left">
      <div class="leftTop">
        <leftTop />
      </div>
      <div class="leftBtm">
        <leftBtm />
      </div>
    </div>
    <div class="center"></div>
    <div class="right">
      <div class="rightTop">
        <rightTop />
      </div>
      <div class="rightBtm">
        <rightBtm />
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import leftTop from './components/leftTop.vue'
import leftBtm from './components/leftBtm.vue'
import rightTop from './components/rightTop.vue'
import rightBtm from './components/rightBtm.vue'
</script>
<style scoped>
.big {
  width: 100%;
  height: 100%;
  display: flex;
}

.center {
  width: 44%;
  height: 100%;
  /* background-color: antiquewhite; */
}

.left {
  width: 28%;
  height: 100%;
  background-color: aquamarine;
  background: url('@/assets/image/Photo／背景／Left@2x.png') no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}

.right {
  width: 28%;
  height: 100%;
  background-color: aquamarine;
  background: url('@/assets/image/Photo／背景／Right@2x.png') no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}

.leftTop,
.leftBtm {
  width: 100%;
  height: 50%;
}

.rightTop,
.rightBtm {
  width: 100%;
  height: 50%;
}</style>
